<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Charts</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/bootstrap.min.css', _external = True) }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/demo.css', _external = True) }}">
</head>
<body>

<ol id="cataLog" class="catalog"></ol>

<div id="demo" style="margin: 0 auto"></div>

<script type="text/javascript" src="{{ url_for('static', filename = 'js/libs/jquery-1.12.0.min.js', _external = True) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'js/catalog.js', _external = True) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'js/echarts.js', _external = True) }}"></script>

<script type="text/javascript">
    $(function () {
        $('#demo').height(window.innerHeight).width(window.innerWidth * 0.5);
        initDemo();
    });

    var initDemo = function () {
        var myChart = echarts.init(document.getElementById('demo'));
        var option = {
            grid: {
                left: 0,
                bottom: 0,
                containLabel: true,
                top: 80
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            toolbox: {
                feature: {
                    dataZoom: {}
                }
            },
            dataZoom: {
                type: 'inside'
            },
            series: []
        };

        $.get('{{ url_for('static', filename = 'data/life-expectancy.json', _external = True) }}', function (data) {
            var series = data.series;

            option.visualMap = {
                show: false,
                min: 0,
                max: 100,
                dimension: 1
            };

            option.legend = {
                data: data.counties,
                selectedMode: 'single',
                right: 100
            };

            data.counties.forEach(function (country) {
                var data = series.map(function (yearData) {
                    var item = yearData.filter(function (item) {
                        return item[3] === country;
                    })[0];
                    return {
                        label: {
                            normal: {
                                show: item[4] % 20 === 0 && item[4] > 1940
                            },
                            emphasis: {
                                position: 'top',
                                show: true
                            }
                        },
                        name: item[4],
                        value: item
                    };
                });
                var links = data.map(function (item, idx) {
                    return {
                        source: idx,
                        target: idx + 1
                    };
                });
                links.pop();

                option.series.push({
                    name: country,
                    type: 'graph',
                    coordinateSystem: 'cartesian2d',
                    data: data,
                    links: links,
                    edgeSymbol: ['none', 'arrow'],
                    edgeSymbolSize: 5,
                    legendHoverLink: false,
                    lineStyle: {
                        normal: {
                            color: '#333'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#333'
                        }
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: '#333'
                            },
                            position: 'right'
                        }
                    },
                    symbolSize: 10,
                    animationDelay: function (idx) {
                        return idx * 100;
                    }
                });
            });


            myChart.setOption(option);
        });
    }
</script>
</body>
</html>